<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack @rightTap="rightTap">
			<block slot="content">我的足迹</block>
		</bar-title>
		
		<!--足迹的tab-->
		<view class="bg-white zaiui-nav-view">
			<scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="headTab.scrollLeft">
				<block v-for="(item,index) in headTab.list" :key="index">
					<view class="cu-item" :class="index==headTab.TabCur?'select':''" @tap="tabSelect" :data-id="index">
						<view :class="index==headTab.TabCur?'text-black':''">{{item}}</view>
						<view class="tab-dot bg-red"/>
					</view>
				</block>
			</scroll-view>
		</view>
		
		
			<!--商品列表-->
			<view class="bg-white zaiui-goods-list-view">
				<view class="zaiui-goods-list-box" v-for="(item,index) in list" :key="index" @tap="goDetail(item)">
					<view class="cu-avatar radius" :style="[{backgroundImage:'url('+ item.goods_image_url +')'}]"/>
					<view class="goods-info-view">
						<view class="text-cut-2 text-black">{{item.goods_name}}</view>
						<view class="goods-info-tools">
							<text class="text-price text-red text-lg">{{item.min_group_price}}</text>
							<text class="cu-tag radius line-red sm">{{item.mall_name}}</text>
						</view>
					</view>
				</view>
			</view>
			
		
		<!--占位底部距离-->
		<view class="cu-tabbar-height"/>
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	import {
		viewHistory
	} from '@/utils/storage.js'
	export default {
		components: {
			barTitle
		},
		data() {
			return {
				headTab: {TabCur: 0, scrollLeft: 0, list: []},			
				goodsList:{}
			}
		},
		onLoad() {
			this.getCategory()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		computed:{
			list(){
				const {list,TabCur} = this.headTab;
				return this.goodsList[list[TabCur]];
			}
		},
		methods: {
			//分类计算
			getCategory(){
				let viewList = viewHistory.get();
				viewList = viewList.filter(v=>v!=null);
				let list = ['全部'];
				let goodsList = {'全部':viewList};
				viewList.forEach(v=>{
					if(v){
						!list.includes(v.category_name) && list.push(v.category_name);
						goodsList[v.category_name] ? goodsList[v.category_name].push(v) :(goodsList[v.category_name] = [v]);
					}					
				});
				this.headTab.list  = list;
				this.goodsList = goodsList;
			},
			//tab菜单被点击
			tabSelect(e) {
				let index = e.currentTarget.dataset.id;
				this.headTab.TabCur = index;
				this.headTab.scrollLeft = (index - 1) * 60;
				
				//滚动到顶部
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 100
				});
			},
			goDetail(item){
				const {list,TabCur} = this.headTab;
				let title = list[TabCur];
				uni.navigateTo({
					url: `/pages/goods/goods?goods_sign=${item.goods_sign}&search_id=${item.search_id}&type=${title}`
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/zaiui/style/footmark.scss";
</style>
